<template>
  <div class="app">
    <Editor v-model="state" :formData="formData"></Editor>
     <!-- <Range :start="1" :end="10" /> -->
  </div>
</template>

<script>
import { ref, provide } from "vue";
import data from "./data.json";
import Editor from "./packages/editor";
import { registerConfig as config } from "./utils/editor-config";
import Range from "./components/Range";

export default {
  components: {
    Editor,
    Range
  },
  setup(){
    const state = ref(data)
    // 将组建配置直接传入
    provide('config', config)

    const formData = ref({
      username: 'zhufeng',
      password: '123',
      start: 1,
      end: 10
    })

    return {
      state,
      formData
    }
  }
}

</script>

<style scoped>
.app{
  position: fixed;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
}
</style>
